---
sidebar_position: 2
--- 

import ImagePreview from "@site/src/components/ImagePreview";

# 数据  

为组件提供**数据**的模块，组件根据不同的数据，展示不同的形态。  

<ImagePreview alt="数据配置" src="/img/docs/设计器/画布/配置/组件配置/数据/data-intro.png" /> 

## 字段映射

组件数据所需要的**字段名称**的**映射**。  

数据*来源*的字段名称可能与组件*需要*的字段名称不同。   
通过映射字段将组件数据字段与数据来源字段一一对应。  
比如存在以下数据：

``` json
  [
    {
      "name": "张三",
      "value": 100 
    }
  ]
```
而组价需要的数据为：
``` json
  [
    {
      "x": "张三",
      "y": 100 
    }
  ]
```
则可以通过映射完成数据字段转换。 


## 数据来源  
  
  组件**数据**的来源类型。  

  当前数据来源包含：[静态数据](#static)和[API](#api)以及[MOCK](#mock)(2022-07-08)  

### 静态数据 {#static}

  当前大屏内**固定**的数据。  

  <ImagePreview alt="静态数据" src="/img/docs/设计器/画布/配置/组件配置/数据/static-config.png" /> 

  通过[代码编辑器](#code-editor)完成`json`数据的设置。  

### API {#api}

  通过设置`url`地址以及一些*参数*，发起的**网络请求**，所响应的**数据**。  

  <ImagePreview alt="api get数据" src="/img/docs/设计器/画布/配置/组件配置/数据/api-get.png" /> 
  <ImagePreview alt="api post数据" src="/img/docs/设计器/画布/配置/组件配置/数据/api-post.png" /> 

  `API`请求包含了：[url地址](#url)、[请求方法](#method)、[可选的请求headers](#headers)和[post请求可选的请求body](#body)

#### url {#url}  

  请求数据的地址。  

#### 请求方法 {#method}  

  请求数据的方法，当前有`get`和`post`。  

#### headers {#headers}

  数据请求携带的额外**请求头**，格式为`json`数据。  
  比如：
```json
  "Content-Type": "application/json"
```

#### 请求body {#body}

  `post`请求专有的请求体，包含一些参数。  
  比如：
```json 
  {
    "id": "template_user_id"
  }
```

:::tip 提示

上述的**url**、**headers**、**body**均支持变量语法。  

:::

变量通过`{{}}`语法，将变量名称写在符号中。  
比如：
  大屏中存在一个名称为`name`的变量，它的值为`张三`。  
  设置`url`地址为`/api/request?name={{name}}`  
  转换后的地址为`/api/request?name=张三`  

#### 定时请求  

  设置时间间隔，**定时**发起网络请求。  

  <ImagePreview alt="定时请求" src="/img/docs/设计器/画布/配置/组件配置/数据/request-interval.png" /> 

#### 服务端请求  

  网络请求不通过浏览器发起，而是通过**服务端**发起请求并返回数据。  

  实际制作大屏时，往往请求的`url`地址和当前大屏地址**域名**并不相同，如此发起请求会出现**跨域**的问题。  

### MOCK {#mock}

来自后端返回的固定的`mock`数据，数据并非真实，而是来自于通过配置以及配合[mockjs](http://mockjs.com/)生成的假数据。  
通常用于做简单演示用，这样可以省去编写静态数据的繁琐步骤，加快大屏的成型。  

<ImagePreview alt="mock介绍" src="/img/docs/设计器/画布/配置/组件配置/数据/mock.png" />   

具体细节请查看示例。[传送门](/docs/实例/example-4)  

### 过滤器  

  将*来源数据*进行一系列的**链式**处理，生成新的数据或格式。  

  `API`请求所得到的数据经常与最后*组件*真正需要的数据格式有很大的不同。  
  比如组件需要的数据为：
``` json 
  {
    "value": "这是一个标题"
  }
```
  而请求返回的数据格式为：  
``` json 
  [
    {
      "name": "这是一个标题"
    }
  ]
```
  此时就需要通过过滤器，对数据**预先**进行处理。  

  过滤器本质是一个个的`javascript`函数。  
  <ImagePreview alt="过滤器" src="/img/docs/设计器/画布/配置/组件配置/数据/filter.png" /> 

  函数的**返回值**为经过处理的数据。  

  函数的参数有两个。  

  * 第一参数  
  第一个参数为*上一个*过滤器的**返回值**，如果是第一个过滤器，则为原始的数据。  
  * 第二参数  
  第二个参数为全局的变量数据集合，之前已经对其有所介绍，这里不再赘述。  

  每一个过滤器的上方都存在一个选择选举参数的**下拉框**，可以设置需要**响应**那些全局参数的**变化**。 

  过滤器本身只会在`API`请求时，或是组价**初始化**时才会执行。  

:::note 提示

上述说的初始化也可表示成设置静态数据的同时，设置过滤器。  

:::

  但是为了满足*不同参数条件*下，显示不同的数据，会对已设置的全局参数进行响应。 
  每当全局参数发生变化时，过滤器都会**重新执行**。 

:::tip 提示

在不设置响应全局参数的情况下，依然能在过滤函数中访问相应的全局参数。  
但是不存在对相应参数变化的响应。  

:::  

同一个组件可以设置**多个**过滤器。 
整个大屏的过滤器均为**全局**过滤器，可以在所有组件中公用，过滤器的列表可以在前面说的**工具栏**的过滤器管理中查看。   
同一个过滤器在同一个组件中只能使用**一次**。  
过滤器的执行顺序从上到下。   
最外部可控制是否开启过滤器，也可以单独控制每个过滤器是否开启。  
点击拖动按钮可以实现过滤器的顺序切换。  

## 代码编辑器 {#code-editor}

  编辑器完成大屏当中一些**编写数据**以及**逻辑**的相关工作。  
  <ImagePreview alt="过滤器" src="/img/docs/设计器/画布/配置/组件配置/数据/code-editor.png" /> 

  比如 过滤器的逻辑函数、组件的条件事件逻辑，API请求的body、headers等。  

  编辑器提供了几个实用的功能，当前包括了**代码格式化**、**代码复制**、**编辑器放大**。（2022-05-28）  
